
<template>
  <div class="book">
    <div class="one-book" v-for="(v, i) in book" :key="i">
      <div class="book-title">
        <input type="checkbox" :checked="bookId.length === book.length" @click='checkedAll()'  />
        <p class="one-title">
          {{ v.title }}
        </p>
        <ul
          class="book-list"
          v-for="(item, index) in v.oneBook"
          :key="item.bookId"
        >
          <li class="book-item">
            <div class="item-right">
              <input type="checkbox" :checked="bookId.indexOf(book.bookId)>=0"  @click='checkedOne(oneBook.id)' />
              <img :src="item.imgSrc" />
            </div>
            <div class="item-left">
              <p class="book-name">{{ item.book_title }}</p>
              <span class="small-box">全新</span>
              <span class="money">{{ item.price }}</span>
              <step-input
                :num="item.number"
                @change="onChange(i, index, $event)"
              />
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="buy-price">
      <div class="buy-left"><input type="checkbox" :checked="bookId.length === book.length" @click='checkedAll()' />全选</div>
      <div class="buy-cen">
        <p class="buy-num">
          合计:
          <span class="buy-money">{{ total.isPrice }}</span>
        </p>
      </div>
      <button class="buy-btn">结算{{ total.isNum }}</button>
    </div>
  </div>
</template>
<script>
import StepInput from "../components/StepInput.vue";
import book from "./book.js";

export default {
  components: {
    StepInput
  },
  data() {
    return {
      book,
      oneBook:[{
        status:true
      }],       
      isNum: 0,
      isPrice: 0,
      isAbout: false,
      bookId:[],
      bookIds:[],
      isCheckedAll: true
    };
  },
  methods: {
    onChange(par, i, ev) {
      console.log(this.book[par].oneBook[i].number);
      this.book[par].oneBook[i].number += ev;
    },
    checkedOne (bookId) {
        let idIndex = this.bookId.indexOf(bookId)
        if (idIndex >= 0) {
          this.bookId.splice(idIndex, 1)
        } else {
          this.bookIds.push(bookId)
        }
    },
    checkedAll () {
      this.isCheckedAll = !this.isCheckedAll
      if (this.isCheckedAll) {
        this.bookId = []
        this.book.forEach(function (book) {
          this.bookId.push(book.bookId)
        }, this)
      } else {
        this.bookId = []
      }
    }
  },
  computed: {
    total() {
      let isNum = 0;
      let isPrice = 0;
      console.log(this.book[0].oneBook);
      for (let i = 0; i < book.length; i++) {
        this.book[i].oneBook.forEach((item) => {
          isNum += item.number;
          isPrice += item.number * Number(item.price.slice(1));
        });
      }

      return {
        isNum,
        isPrice,
      }
    }
  },
  watch:{
    deep:true,
    oneBook:{
      
      handler(newVal,oldVal){
      console.log('newVal',newVal);
      console.log('oldVal',oldVal)
      }
    }
    
  }
};
</script>
<style lang="sass" scoped>
.book
  background: #f9f9f5
  .one-book,.two-book
    width: 100%
    .book-title
      margin-left: 30px
      display: flex
      flex-direction: column
      align-items: center
      .one-title
        line-height: 60px
        height: 50px
        font-size: 22px
      .book-list
        background: #fff
        width: 100%
        .book-item
          padding-top: 20px
          margin-top: 20px
          display: flex
          justify-content: space-between
          .item-right
            display: flex
            align-items: center
            width: 30%
            justify-content: space-around
            margin-left: 20px
            .item-left
              display: flex
              align-items: start
              padding-left: 20px
              width: 70%
              line-height: 60px
              flex-direction: column
              position: relative
              .small-box
                font-size: 12px
                background: #ccc
                line-height: 20px
                padding: 5px
                color: #999
                .money
                  color: #90221a
                  .step-input
                    position: absolute
                    right: 10px
                    bottom: 10px
  .buy-book
    position: absolute
    bottom: -40px
    left: -150px
    background: #f9f3f0
    color: #b0714e
    padding: 5px
    font-size: 12px
    line-height: 20px
    border-radius: 5px
  .buy-price
    margin-top: 100px
    width: 100%
    height: 80px
    display: flex
    justify-content: space-around
    line-height: 80px
    background: #fff
    .buy-left input
      margin-right: 30px
    .buy-cen .buy-money
      color: #90221a
    .buy-btn
      width: 20%
      height: 100%
      background: #90221a
      color: #fff
</style>
